<template>
	<view class="msg-list">

		<view class="msg-item" @tap="showSelectPop(1)">
			<view class="item-left">
				<text class="item-name">评价</text>
				<view class="item-input" :class="{'input-placeholder':!selectedGradeText}">
					{{selectedGradeText ? selectedGradeText : '请选择' }}</view>
			</view>
			<!-- <view class="item-right">
				<image class="right-arrow-icon" src="../../static/rightTriangleArrow.png"></image>
			</view> -->

	        <view class="item-right">
				<view class="user-avatar-block">
					<image class="user-avatar" v-show="selectedEmojiId" :src="getImgUrl(selectedEmojiId)"></image>
				</view>
				<image class="right-arrow-icon" v-show="!selectedEmojiId" src="../../static/rightTriangleArrow.png">
				</image>
			</view>
		</view>

		<!-- <view class="msg-item" @tap="showSelectPop(2)">
			<view class="item-left">
				<text class="item-name">表情</text>
				<view class="item-input" :class="{'input-placeholder': !selectedEmojiId }">
					{{ selectedEmojiId ? '可点击更换' : '请选择' }}</view>
			</view>
			<view class="item-right">
				<view class="user-avatar-block">
					<image class="user-avatar" v-show="selectedEmojiId" :src="getImgUrl(selectedEmojiId)"></image>
				</view>
				<image class="right-arrow-icon" v-show="!selectedEmojiId" src="../../static/rightTriangleArrow.png">
				</image>
			</view>
		</view> -->

		<view class="msg-item">
			<view class="item-left">
				<text class="item-name">短评（非必填）</text>
				<textarea class="item-input long" placeholder="请输入" maxlength="100" v-model="desc"
					placeholder-class="input-placeholder" auto-height />
			</view>
		</view>

		<view class="select-options-mask" v-show="popShowFlag > 0" :class="{'outAni':isInOuting}"></view>
		<view class="select-options-pop" v-show="popShowFlag > 0" :class="{'outAni':isInOuting}">
			<image class="select-options-bg" src="../../static/selectOptionsPopBg.png"></image>
			<view class="select-options-content">
				<view class="select-options-top">
					<text class="select-options-title">选择{{popShowFlag === 1 ? '评价':'表情'}}</text>
					<image class="close-icon" src="../../static/closeIcon.png" @tap="hideSelectPop"></image>
				</view>
				<view class="select-options-body1" v-if="popShowFlag == 1">
					<view class="select-options-item" v-for="item in evaluateGrade" :key="item.code"
						@tap="selectEvaluate(item)">
						<image class="options-item-img" :src="getImgUrl(item.fileUrl)"></image>
						{{item.value}}
					</view>
				</view>
				<view class="select-options-body2" v-if="popShowFlag == 2">
					<image class="emoji-img" v-for="item in evaluateIcon" :key="item.fileUrl" @tap="selectEmoji(item)"
						:src="getImgUrl(item.fileUrl)"></image>
				</view>
			</view>
		</view>

		<view class="submit-btn-wrap">
			<largeBtn :disabled="btnDisabled" @btnClk="submit">确认</largeBtn>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				isInOuting: false,
				popShowFlag: -1,

				selectedGradeText: '',
				selectedEmojiId: '',

				gradeCode: '',
				iconCode: '',
				desc: ''
			}
		},
		computed: {
			...mapState(['evaluateIcon', 'evaluateGrade','newEvaluate']),
			btnDisabled() {
				return !this.gradeCode || !this.iconCode
			}
		},
		onLoad() {
			this.isInOuting = false
			this.selectedGradeText = this.newEvaluate.evaluateGrade
			this.selectedEmojiId = this.newEvaluate.evaluateIconId
			
			this.gradeCode = this.newEvaluate.evaluateGrade
			this.iconCode = this.newEvaluate.evaluateIcon
			
			this.desc = this.newEvaluate.evaluateDesc
		},
		methods: {
			selectEvaluate(item) {
				this.selectedGradeText = item.value
				this.gradeCode = item.value
				this.selectedEmojiId = item.fileUrl
				this.iconCode = item.value
				this.hideSelectPop()
			},
			selectEmoji(item) {
				this.selectedEmojiId = item.fileUrl
				this.iconCode = item.value
				this.hideSelectPop()
			},
			showSelectPop(flag) {
				this.isInOuting = false
				this.popShowFlag = flag
			},
			hideSelectPop() {
				this.isInOuting = true
				setTimeout(() => {
					this.popShowFlag = -1
				}, 300)
			},
			submit() {
				this.$store.commit('updateNewEvaluate', {
					evaluateGrade: this.gradeCode,
					evaluateIcon: this.iconCode,
					evaluateIconId:this.selectedEmojiId,
					evaluateDesc: this.desc,
				})
				uni.navigateBack()
			}
		}
	}
</script>

<style>
	page {
		background-color: #F3F7FD;
	}
</style>
<style lang="less">
	.msg-list {
		padding: 30rpx 40rpx;
		padding-bottom: 140rpx;

		.msg-item {
			background: #FFFFFF;
			box-shadow: 0 4rpx 8rpx 0 rgba(218, 227, 248, 0.5);
			border-radius: 10rpx;
			display: flex;
			justify-content: space-between;
			padding: 30rpx;
			margin-bottom: 40rpx;

			.item-left {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.item-name {
					font-size: 36rpx;
					font-weight: 500;
					color: #333333;
					line-height: 50rpx;
					margin-bottom: 20rpx;
				}

				.item-input {
					font-size: 32rpx;
					font-weight: 400;
					color: #666;
					line-height: 44rpx;
					width: 340rpx;

					&.long {
						width: 610rpx;
					}
				}

				.input-placeholder {
					color: #999;
				}
			}

			.item-right {
				min-height: 110rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.user-avatar-block {
					display: flex;
					flex-direction: column;
					align-items: center;

					.user-avatar {
						width: 96rpx;
						height: 96rpx;
					}
				}

				.right-arrow-icon {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}

	.select-options-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 99;
		animation: fadeIn 0.3s forwards;

		&.outAni {
			animation: fadeOut 0.3s forwards;
		}
	}

	.select-options-pop {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 750rpx;
		height: 594rpx;
		z-index: 100;
		background-color: #FFFFFF;

		.select-options-bg {
			width: 750rpx;
			height: 594rpx;
		}

		animation: slideIn 0.3s forwards;

		&.outAni {
			animation: slideOut 0.3s forwards;
		}

		.select-options-content {
			position: absolute;
			left: 0;
			top: 0;
			width: 750rpx;
			height: 594rpx;
		}

		.select-options-top {
			height: 110rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			.select-options-title {
				font-size: 36rpx;
				font-weight: 500;
				color: #333333;
				line-height: 50rpx;
			}

			.close-icon {
				width: 52rpx;
				height: 52rpx;
				position: absolute;
				right: 26rpx;
				top: 30rpx;
			}
		}

		.select-options-body1 {
			padding: 68rpx;
			padding-top: 16rpx;

			.select-options-item {
				height: 100rpx;
				display: flex;
				align-items: center;
				font-size: 30rpx;
				font-weight: 400;
				color: #323746;
				line-height: 42rpx;
				box-shadow: 0 2rpx 0 0 #EEEEEE;
				.options-item-img{
					width: 60rpx;
					height: 60rpx;
					margin-right: 20rpx;
				}
			}
		}

		.select-options-body2 {
			padding: 29rpx;
			padding-top: 22rpx;
			padding-bottom: 16rpx;
			display: flex;
			flex-wrap: wrap;

			.emoji-img {
				flex-shrink: 0.1;
				flex-basis: 64rpx;
				width: 64rpx;
				height: 64rpx;
				margin: 0 25rpx;
				margin-bottom: 48rpx;
			}
		}

	}

	.submit-btn-wrap {
		width: 670rpx;
	}

	@keyframes slideIn {
		0% {
			transform: translateY(100%);
		}

		100% {
			transform: translateY(0);
		}
	}

	@keyframes fadeIn {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes slideOut {
		0% {
			transform: translateY(0);
		}

		100% {
			transform: translateY(100%);
		}
	}

	@keyframes fadeOut {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}
</style>
